import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import PropTypes from 'prop-types';
import { Link, hashHistory } from 'react-router';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import {
  Input,
  Button,
  Select,
  Checkbox,
  Grid,
  Upload,
  Feedback
} from '@icedesign/base';

const { Row, Col } = Grid;
const CheckboxGroup = Checkbox.Group;

export default class PublistForm extends Component {
  static displayName = 'PublistForm';

  static propTypes = {
    downloadPath : PropTypes.string.isRequired,
    channel : PropTypes.array.isRequired,
    onSubmit : PropTypes.func.isRequired,
  };

  static defaultProps = {
  };

  constructor(props) {
    super(props);
    this.state = {
      uploaded : false,
      value: {
      },
    };
  }

  onFormChange = (value) => {
    this.setState({ value, });
  };

  beforeUpload = () => { this.setState({uploaded : false}) }

  onSuccess = () => { this.setState({uploaded : true }) }

  onError = () => {
    this.setState({ uploaded:false });
    Feedback.toast.error('数据文件提交失败了, 请重新提交')
  }

  submitForm = () => {
    this.setState({loading : true})
    this.refs.form.validateAll(async(errors, value) => {
      if (errors) { this.setState({loading : false}); return; }
      let file = value.file.fileList.map(f=> {return { file : f.response.data, name : f.fileName}})
      if(file.length == 0){
        this.setState({loading : false});
        Feedback.toast.error('有文件提交失败了, 请重新提交');
        return;
      }
      let flag = false
      try {
        flag = await this.props.onSubmit( { ... value, file : file[0] })
      } catch (error) { }
      if(flag){
        Feedback.toast.success('提交成功');
      }else{
        Feedback.toast.error('提交失败');
      }
      this.setState({loading : false})
    });
  };

  render() {
    return (
      <div className="grouped-form">
        <IceContainer title="广告推送" style={styles.container}>
          <IceFormBinderWrapper ref="form" value={this.state.value} onChange={this.onFormChange}>
            <div>
              <Row style={styles.formItem}>
                <Col xxs="8" s="3" l="3" style={styles.formLabel}> 数据模版: </Col>
                <Col s="12" l="10">
                  <a href={this.props.downloadPath} target="_blank" style={styles.link}> 数据模版 </a>
                </Col>
              </Row>
              <Row style={styles.formItem}>
                <Col xxs="8" s="3" l="3" style={styles.formLabel}> 推广范围: </Col>
                <Col s="12" l="10">
                  <IceFormBinder name="channel" type="array">
                    <CheckboxGroup className="next-form-text-align" required message="请选择推广范围" dataSource={this.props.channel} />
                  </IceFormBinder>
                  <IceFormError name="channel" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="8" s="3" l="3" style={styles.formLabel}> 文件: </Col>
                <Col s="12" l="10">
                  <IceFormBinder name="file" required message="数据文件必填">
                    <Upload listType="text" beforeUpload={this.beforeUpload} limit={1} onSuccess={this.onSuccess} onError={this.onError}
                      action="http://localhost:8080/api/upload/"
                      headers={this.props.headers}
                      accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                      <Button type="normal" style={{ margin: "0 0 10px" }}> 上传文件 </Button>
                    </Upload>
                  </IceFormBinder>
                  <IceFormError name="file" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col offset={3}>
                  <Button onClick={this.submitForm} loading={this.state.loading} disabled={this.state.loading || !this.state.uploaded} type="primary"> 提交 </Button>
                </Col>
              </Row>
            </div>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  container: {
    paddingBottom: 0,
  },
  subForm: {
    marginBottom: '20px',
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    fontSize: '14px',
    borderBottom: '1px solid #eee',
  },
  formItem: {
    height: '28px',
    lineHeight: '28px',
    marginBottom: '25px',
  },
  formLabel: {
    textAlign: 'right',
    paddingRight : '5px',
  },
  btns: {
    margin: '25px 0',
  },
  link: {
    color: '#2A64E8',
    textDecoration: 'underline',
  },
  resetBtn: {
    marginLeft: '20px',
  },
};
